<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>沈阳智慧旅游综合服务平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="" name="viewport" />
    <meta name="description" content="沈阳智慧旅游综合服务平台" />
    <meta name="keywords" content="沈阳智慧旅游综合服务平台" />
    <meta content="dlq" name="author" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> -->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-validate/1.16.0/jquery.validate.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> -->
    <script src="https://cdn.bootcss.com/jquery-validate/1.16.0/additional-methods.min.js"></script>
    <!-- <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/additional-methods.min.js"></script> -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" /> -->

    <link rel="shortcut icon" href="favicon.ico" />
    <style>
        
        body {
          overflow: hidden;
          position: fixed;
          width:100%;
          height:100%;
          background: url(./app/00pageframework/img/tp1.jpg) no-repeat;
          background-size: cover;
        }
        .container-fluid{  
            display:table;  
            height:100%;  
        }  
        .row{  
            display: table-cell;  
            vertical-align: middle;  
        } 
        .data-form {
            background-color: white;
            filter: alpha(Opacity=90);
            -moz-opacity: 0.9;
            opacity: 0.9;
            margin: 0 10px;
        }
        .mt200 {
            margin-top: 200px;
        }
        .pdlr15 {
            padding-right: 15px !important;
            padding-left: 15px !important;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row mt200 main">
            <div class="col-xs-12 data-form">
                <div class="col-xs-12 text-center">
                    <h4 class="step-1 title-1" style="display: inline-block; margin-bottom: 0px; margin-top: 20px;"></h4>
                    <h6 class="step-1 col-xs-offset-4" style="margin-bottom: 15px;">(已有账号请绑定，没有请注册)</h6>
                    <h2 class="step-2 step-3" style="display: inline-block;">注册</h2>
                </div>
                <div class="col-xs-12">
                    <form class="form-horizontal">
                        <div class="form-group step-1">
                            <label for="name" class="col-sm-3 control-label ">账号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="name" placeholder="机构编号/手机号">
                            </div>
                        </div>
                        <div class="form-group step-3">
                            <label for="username" class="col-sm-3 control-label ">所属区域</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="area_id" placeholder="所属区域">
                                    <!-- <option value=""></option> -->
                                </select>
                                <!-- <input type="text" class="form-control" id="area_id" placeholder="所属区域"> -->
                            </div>
                        </div>
                        <div class="form-group step-3">
                            <label for="username" class="col-sm-3 control-label ">机构名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="username" placeholder="机构名称">
                            </div>
                        </div>
                        <div class="form-group step-1 step-3">
                            <label for="password" class="col-sm-3 control-label ">密码</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" id="password" placeholder="密码(6-36位)">
                            </div>
                        </div>
                        <div class="form-group step-3">
                            <label for="password_2" class="col-sm-3 control-label ">确认密码</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" id="password_2" placeholder="再次输入密码">
                            </div>
                        </div>
                        <div class="form-group step-2">
                            <label for="mobile" class="col-sm-3 control-label ">手机号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="mobile" placeholder="手机号">
                            </div>
                        </div>
                        <div class="form-group step-2">
                            <label for="code_input" class="col-sm-3 control-label ">验证码</label>
                            <div class="col-sm-8 input-group pdlr15">
                                <input type="text" class="form-control" id="code_input" style="width: 50%" placeholder="验证码">
                                <img id="v_container" style="cursor:pointer;width: 50%; height: 34px; padding: 0px; margin: 0px; border-width: 0px;" />
                            </div>
                        </div>
                        <div class="form-group step-2">
                            <label for="verification" class="col-sm-3 control-label ">短信码</label>
                            <div class="col-sm-8 input-group pdlr15">
                                <input type="text" class="form-control" id="verification" placeholder="短信验证码">
                                <span type="button" id="my_button" class="input-group-addon btn get-verification">
                                    获取短信验证码
                                </span>
                            </div>
                        </div>
                        <div class="form-group step-2">
                            <div class="col-sm-offset-2 col-sm-9 text-right">
                                <button type="button" class="btn btn-warning back-bind">返回</button>
                                <button type="button" class="btn btn-success next-step">下一步</button>
                            </div>
                        </div>
                        <div class="form-group step-3">
                            <div class="col-sm-offset-2 col-sm-9 text-right">
                                <button type="button" class="btn btn-success sure-register">注册</button>
                            </div>
                        </div>
                        <div class="form-group step-1">
                            <div class="col-sm-offset-2 col-sm-9 text-right">
                                <button type="button" class="btn btn-link btn-register">注册</button>
                                <button type="button" class="btn btn-success btn-bind">绑定</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var msgKey = "", picKey;
        var rid = getQueryString('rid');
        var cid = getQueryString('cid');
        var isGettingVerification = false;
        var time = 60;

        if (!rid || !cid) {
            $('.main').addClass('text-center');
            $('.main').html('<h2>链接地址出错, 请确认后再申请</h2>');
            $('body').css('background', 'white')
        } else {
            var para = {
                rid: rid,
                cid: cid
            }
            $.ajax({
                url: "/api/uc/sc/office/findOfficeByCid",
                type: 'POST',
                data: JSON.stringify(para),
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (data, textStatus, jqXHR) {
                    if (data.errcode === 0) {
                        $('.title-1').html('<strong>【'+data.data.name+'】邀请您成为其分销商</strong>');
                    } else {
                        alert(data.errmsg);
                    }
                },
            });
            $.ajax({
                'url': "/api/us/sc/city/citylist",
                'type': 'get',
                'dataType': 'json',
                'success': function (data, textStatus, jqXHR) {
                    if (data.errcode === 0) {
                        var html = '';
                        for (var index = 0; index < data.data.length; index++) {
                            var element = data.data[index];
                            html += '<option value="'+element.ID+'">'+element.NAME+'</option>';
                        }
                        $('#area_id').html(html);
                    } else {
                        alert(data.errmsg);
                    }
                },
            });
        }

        function cunInit() {
            msgKey = "";
            $('#verifyCanvas').click();
            isGettingVerification = false;
            time = 60;
            $('#mobile').val('');
            $('#username').val('');
            $('#code_input').val('');
            $('#verification').val('');
            $('#mobile').removeAttr('disabled');
        }
        function settime() {
            $('.get-verification').html('&nbsp;&nbsp;&nbsp;&nbsp;'+time+'&nbsp;&nbsp;&nbsp;&nbsp;');
            if (time > 0) {
                time--;
                setTimeout(function(){
                    settime();
                }, 1000)
            } else {
                $('.get-verification').html('重新获取')
                $('.get-verification').removeAttr('disabled')
                isGettingVerification = false;
                time = 60;
            }
        }


        var step2 = $('.step-2');
        for (var i = 0; i < step2.length; i++) {
            step2[i].style.display = "none";
        }
        var step3 = $('.step-3');
        for (var i = 0; i < step3.length; i++) {
            step3[i].style.display = "none";
        }
        var step1 = $('.step-1');
        for (var i = 0; i < step1.length; i++) {
            step1[i].style.display = "block";
        }

        $(function () {
            $(".btn-register").bind('click', function () {
                $('.step-1').hide();
                $('.step-3').hide();
                $('.step-2').show();
                getCodePic();
            });
            $(".back-bind").bind('click', function () {
                $('.step-2').hide();
                $('.step-3').hide();
                $('.step-1').show();
                cunInit();
            });
            //下一步
            $(".next-step").bind('click', function () {
                var verification = $('#verification').val();
                if (!msgKey) {
                    alert("请先获取短信验证码")
                    return false;
                }
                if (!verification || verification.length != 6) {
                    alert("请输入正确的短信验证码")
                    return false;
                }
                var para = {
                    'code': verification,
                    'key': msgKey
                }
                $.ajax({
                    url: "/api/uc/sc/office/checkMessageCode",
                    type: 'POST',
                    data: JSON.stringify(para),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data, textStatus, jqXHR) {
                        if (data.errcode === 0 && data.data == '成功') {
                            $('.step-1').hide();
                            $('.step-2').hide();
                            $('.step-3').show();
                        } else {
                            alert(data.errmsg);
                        }
                    },
                });
            });
            //获取短信验证码
            $(".get-verification").bind('click', function () {
                if (isGettingVerification) {
                    return false;
                }
                var mobile = $('#mobile').val();
                var vcode = $('#code_input')[0].value;
                if (!vcode) {
                    alert("验证码错误");
                    return false;
                }
                if (!isMobil(mobile)) {
                    alert('请输入正确的电话号')
                    return false;
                }
                isGettingVerification = true;
                $('.get-verification').attr('disabled', 'disabled')
                $.ajax({
                    url: "/api/uc/sc/loginService/sendMessage",
                    type: 'POST',
                    data: JSON.stringify({ 'mobile': mobile, 'vcode': vcode , 'key': picKey}),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data, textStatus, jqXHR) {
                        if (data.errcode === 0) {
                            msgKey = data.data;
                            $('#mobile').attr('disabled', 'disabled')
                            alert('发送成功');
                            settime();
                        } else {
                            alert(data.errmsg);
                            getCodePic();
                            $('.get-verification').removeAttr('disabled');
                            isGettingVerification = false;
                        }
                        picKey = '';
                    }
                });
            });
            //注册
            $(".sure-register").bind('click', function () {
                $('#verifyCanvas').click();
                var username = $('#username').val();
                var password = $('#password').val();
                var mobile = $('#mobile').val();
                var area_id = $('#area_id').val();
                if (!area_id) {
                    alert("请输入用户选择区域")
                    return false;
                }
                if (!username) {
                    alert("请输入用户名")
                    return false;
                }
                if (!password && password.length >= 6 && password.length <= 36) {
                    alert("请输入合理位数的密码")
                    return false;
                }
                var password_2 = $('#password_2').val();
                if (!(password == password_2)) {
                    alert('两次输入密码不一致');
                    return false;
                }
                if (!isMobil(mobile)) {
                    alert("请输入正确的电话号")
                    return false;
                }
                var para = {
                    'name': username,
                    'password': password,
                    'mobile': mobile,
                    'area_id': area_id,
                    'rid': rid,
                    'cid': cid
                }
                $.ajax({
                    url: "/api/uc/sc/office/saveOpenRegisterOffice",
                    type: 'POST',
                    data: JSON.stringify(para),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data, textStatus, jqXHR) {
                        if (data.errcode === 0) {
                            alert('成功【'+data.data+'】')
                            location.href = '/';
                        } else {
                            alert(data.errmsg);
                        }
                    },
                });

            });
            //点击验证码图片重新加载
            $("#v_container").bind('click', function () {
                getCodePic();
            });
            //登录
            $(".btn-bind").bind('click', function () {
                var name = $('#name').val();
                var password = $('#password').val();
                if (!username) {
                    alert("请输入用户名")
                    return false;
                }
                if (!password) {
                    alert("请输入密码")
                    return false;
                }
                var para = {
                    'name': name,
                    'password': password,
                    'rid': rid,
                    'cid': cid
                }
                $.ajax({
                    url: "/api/uc/sc/office/saveBindOffice",
                    type: 'post',
                    data: JSON.stringify(para),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data, textStatus, jqXHR) {
                        if (data.errcode === 0 && data.data == '绑定成功') {
                            alert("成功");
                        } else {
                            alert(data.errmsg);
                        }
                    },
                });
            });
        })
        /**
        * 验证手机号
        * @param {需要校验的手机号} mobile
        * @return 错误返回 false , 正确返回 true
        */
        function isMobil(mobile) {
            var patrn = /(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
            if (!patrn.exec(mobile)) {
                return false;
            }
            return true;
        }
        /**
        * 获得 API 参数
        * @param {Object} name
        */
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
        //获取图形验证码
        function getCodePic() {
            $.ajax({
                url: "/api/uc/sc/loginService/getCodePic",
                type: 'get',
                success: function (data, textStatus, jqXHR){
                    if (data.errcode === 0) {
                        picKey = data.data.key;
                        $('#v_container')[0].src = data.data.pic;
                    } else {
                        alert('获取图形验证码失败');
                    }
                }
            });
        }
    
    </script>
    
</body>

</html>